<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<canvas id="c1"></canvas>
	<div id="h1"></div>
	<div id="s1"></div>
	<a href="./deal-video.html">视频截图</a>
	<script>
		const img = new Image()
		img.crossOrigin = 'anonymous'
		img.src = './html-video.jpg'
		const canvas = document.getElementById('c1')
		ctx = canvas.getContext('2d')
		img.onload = function() {
			ctx.drawImage(img, 0, 0)
			img.style.display = 'none'
		}

		const hoverColor = document.getElementById('h1')
		const selectColor = document.getElementById('s1')

		function pick(e, destination) {
			const x = event.layerX
			const y = event.layerY

			const pixel = ctx.getImageData(x, y, 1, 1)
			const data = pixel.data
			const rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3]/ 255}})`
			destination.style.background = rgba
			destination.textContent = rgba
			return rgba
		}

		canvas.addEventListener('mousemove', function (e) {
			pick(event, hoverColor)
		})
		canvas.addEventListener('click', function (e) {
			pick(event, selectColor)
		})
	</script>
</body>
</html>